<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="browsermode" content="application">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <!-- 禁止百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no">
    <title>产品分类</title>
    <link rel="stylesheet" href="${request.contextPath}/web/css/reset.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/web/css/base.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/web/css/category.css?v=${verison!}">
</head>
<script type="text/javascript" src="${request.contextPath}/web/js/media_750.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/common.js?v=${verison!}"></script>
<body style="background-color: rgb(255, 255, 255);">
<div>
    <div class="app">
        <div class="productSort router">
            <form method="get" action="${request.contextPath}/web/searchResult" id="form">
                <div class="header acea-row row-center-wrapper">
                    <div class="acea-row row-between-wrapper input"><span class="iconfont icon-sousuo"></span>
                        <input type="text" placeholder="搜索商品信息" name="keyWords">
                    </div>
                </div>
            </form>
            <div class="type">
                <a href="${request.contextPath}/web/category" class="tag <#if type==1>active</#if>">
                    用途
                </a>
                <a href="${request.contextPath}/web/category?type=2" class="tag <#if type==2>active</#if>">
                    材质
                </a>
            </div>
            <div class="aside">
                <#if types??>
                    <#list types as item>
                        <div class="item acea-row row-center-wrapper <#if item_index==0>on</#if>"><span>${item.cateName!}</span></div>
                    </#list>
                </#if>
            </div>
            <div class="conter">
                <#if typesData??>
                    <#list typesData?keys as key>
                        <div class="listw">
                            <div class="title acea-row row-center-wrapper">
                                <div class="line"></div>
                                <div class="name">${key}</div>
                                <div class="line"></div>
                            </div>
                            <div class="list acea-row">
                                <#if typesData["${key}"]??>
                                    <#list typesData["${key}"] as item>
                                        <a href="${request.contextPath}/web/searchType?typeId=${item.id}" class="item acea-row row-column row-middle">
                                            <div class="picture">
                                                <img src="${item.pic!}">
                                            </div>
                                            <div class="name line1">${item.cateName!}</div>
                                        </a>
                                    </#list>
                                </#if>
                            </div>
                        </div>
                    </#list>
                </#if>
            </div>
            <div style="height: 1.2rem;"></div>
        </div>
    </div>
    <#include "include/footer.html" />
</div>
</body>
<script>
    $(function () {
        $(".aside .item").on('touchstart', function () {
            var $item = $(this);
            var index = $item.index();
            var top = $('.conter .listw')[index].offsetTop - $('.header')[0].offsetHeight - $('.type')[0].offsetHeight - window.scrollY;
            $(".aside .item").removeClass('on');
            $item.addClass('on');
            window.scrollBy({ top: top, left: 0, behavior: "smooth" });
        })
        $(window).on('scroll', function () {
            var length =  $('.conter .listw').length;
            $('.conter .listw').each(function(i, item) {
                var top1 = $('.conter .listw')[i].offsetTop - $('.header')[0].offsetHeight - $('.type')[0].offsetHeight;
                var top2 = 999999;
                if(i < length-1){
                    top2 = $('.conter .listw')[i+1].offsetTop - $('.header')[0].offsetHeight - $('.type')[0].offsetHeight;
                }
                if(window.scrollY >= top1 && window.scrollY < top2){
                    $(".aside .item").removeClass('on');
                    $(".aside .item").eq(i).addClass('on');
                }
            });
        })
    })
</script>
</html>